<template>
  <div class="vita-cell">
    <div class="vita-cell-bd vita-cell-primary">
      <textarea class="vita-text-area" rows="{{rows}}" placeholder="{{placeholder}}" v-model="value"></textarea>
      <div class="vita-textarea-counter" v-show="maxLength"><span>{{count}}</span>/{{maxLength}}</div>
    </div>
  </div>
</template>

<script>

  export default {

    props: {
      rows: {
        type: Number,
        required: false,
        default: 3
      },

      placeholder: {
        type: String,
        required: false,
        default: '请填写信息'
      },

      maxLength: {
        type: Number,
        required: false
      },

      value: {
        type: String,
        default: '',
        twoWay: true
      }
    },

    computed: {
      count() {
        return this.value.length 
      }
    },

    watch: {
      value(nValue) {
        let max = this.maxLength
        if (max && this.value.length > max) {
          this.value = nValue.slice(0, max)
        }
        this.$dispatch('change', this.value)
      }
    }

  }
</script>